import React, { useMemo, useState } from 'react'
import './mima.css'
import { NavBar, Space, Toast, Input,Form,Button} from 'antd-mobile'
import { CloseOutline, MoreOutline, SearchOutline, EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'

export default function Mima() {
  const right = (<div style={{ fontSize: 24 }}>
    <Space style={{ '--gap': '16px' }}>
      <SearchOutline />
      <MoreOutline />
    </Space>
  </div>);
  const back = () => Toast.show({
      content: '点击了返回区域',
      duration: 1000,
  });

  const [visible, setVisible] = useState(false)
  const [password, serPassword] = useState('')
  return (
    <div className='dahe'>
      <NavBar onBack={back}></NavBar>
      <div className='cont'>
        <span className='span1'>密码登录</span><br />
        <div className='shuru'>
        <Input placeholder='请输入手机号' clearable/>
        <div className='yzma1'>
        <div className='yzma'>
        <div className='password'>
          <Input
            className='input'
            placeholder='请输入密码'
            type={visible ? 'text' : 'password'}
            value={password}
            onChange={(aa)=>{serPassword(aa)}}
          />
          <div className='eye'>
            {!visible ? (
              <EyeInvisibleOutline onClick={() => setVisible(true)} />
            ) : (
              <EyeOutline onClick={() => setVisible(false)} />
            )}
          </div>
        </div>
        </div>
            <button className='huoqu'>忘记密码</button>
        </div>
        <div className='denglu'>
        <Button block shape='rounded' color='primary'>
            登录
        </Button>
        </div>
        </div>
      </div>
    </div>
  )
}
